<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加员工</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/layui_v2/css/layui.css" media="all"/>
</head>
<body>

<!-- 添加员工 -->
<div id="add_emp_div">
    <div style="width: 600px;height: 570px;padding: 15px">

        <div style="width: 400px;height:500px;float: left">
            <form id="add_emp_form" class="layui-form" action="${pageContext.request.contextPath}/empAction_save.action"
                  method="post" lay-filter="add_emp_form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">真实姓名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="truename" lay-verify="required" placeholder="请输入..."
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登录名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="loginname" lay-verify="loginname" placeholder="请输入..."
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登录密码:</label>
                        <div class="layui-input-inline">
                            <input type="password" name="psw" lay-verify="required" placeholder="请输入..."
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所在部门:</label>
                    <div class="layui-input-inline">
                        <select id="dept_select" name="dept.id" lay-filter="dept_id_select">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="男" title="男" checked="">
                        <input type="radio" name="sex" value="女" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">员工头像:</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
                        <input type="text" class="layui-input" readonly="readonly" name="img" value="images/face.jpg"
                               id="emp_input_img">
                    </div>
                </div>
                <div class="layui-form-item ">
                    <label class="layui-form-label">员工备注:</label>
                    <div class="layui-input-block">
                        <textarea name="remark" value="" required placeholder="请输入内容" class="layui-textarea"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">员工级别:</label>
                    <div class="layui-input-inline" id="flag_div">
                        <select name="flag" lay-filter="flag_select">
                            <option value="0" selected="">普工</option>
                            <option value="1">部门主管</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限级别:</label>
                    <div class="layui-input-inline">
                        <select name="admin" lay-filter="aihao">
                            <option value="0" selected="">普通操作者</option>
                            <option value="1">部门主管</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="">新增员工</button>
                    </div>
                </div>
            </form>
        </div>

        <!--右边上传图片预览-->
        <div style="width:auto; float: left">
            <img src="${pageContext.request.contextPath}/images/face.jpg" style="width: 150px;height: 150px"
                 class="layui-upload-img layui-circle" id="upload_img"/>
            <p id="upload_imgText"></p>
        </div>


    </div>
</div>


<script src="${pageContext.request.contextPath}/layui/layui_v2/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form', 'upload'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload;

        //自定义验证规则
        form.verify({
            loginname: function (value) {
                var reg = /^[a-z]+$/i;
                if (!reg.test(value)) {
                    return "只能输入字母";
                } else {
                    var msg = '';
                    $.ajax({
                        url: "${pageContext.request.contextPath}/empAction_validateLoginname.action",
                        type: 'POST',
                        async: false,
                        data: {loginname: value},
                        success: function (back) {
                            if (back === '1') {
                                msg = '该登陆名已经存在';
                            }
                        }
                    });
                    if (msg !== '')
                        return msg;
                }
            }
        });


        //部门动态添加部门选择
        $.post("${pageContext.request.contextPath}/deptAction_findAll.action", function (data) {

            var options = "";
            for (var i = 0; i < data.length; i++) {
                //拼字符串时千万不能出错，尤其是value不能有空格
                options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
            }
            $("#dept_select").append(options);

            form.render();

        });


        //图片重新上传参数
        var lastpath;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload_btn'
            , url: '${pageContext.request.contextPath}/uploadAction_uploadfile.action'
            , size: 500
            , method: 'post'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                } else {
                    layer.msg('上传成功');
                }
                $("#upload_btn").text("重新上传");

                if (lastpath == null) {
                    lastpath = res.data.path;
                } else {

                    $.post("${pageContext.request.contextPath}/uploadAction_deleteFile.action", {lastpath: lastpath}, function () {
                        lastpath = res.data.path;
                    });
                }
                $("#emp_input_img").val(res.data.src);

                //上传成功
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#upload_imgText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }

        });

        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        //主管替换
        var managerReplace = false;

        //监听员工级别切换
        form.on('select(flag_select)', function (data) {
//            console.log(data.value); //得到被选中的值
            //获取被选中的部门的值
            var deptselid = $("#dept_select").val();
//            layer.msg(deptselid);
            var flag = data.value;
            if (flag == '1') {
                var url = '${pageContext.request.contextPath}/deptAction_checkFlag.action';
                $.post(url, {id: deptselid}, function (data) {
//                    layer.msg(data);
                    if (data == 'true') {
                        layer.tips('该部门已经存在部门主管', "#flag_div");
                        managerReplace = true;//该部门存在部门主管
                    }
                });
            }
        });

        //监听部门切换
        form.on('select(dept_id_select)', function (data) {
            $("#flag_select").val(0);
            form.render();
        });


        //监听提交
        form.on('submit(add_emp_form)', function (data) {
            //是否主管替换
            if (managerReplace) {

                var deptname = $("#dept_select").find("option:selected").text();

                var info = '<span style="color: red">' + deptname + '</span>已经存在部门主管，是否替换该主管？';

                layer.confirm(info, {icon: 3, title: '主管替换确定', btn: ['确定替换', '设为普工']}, function (index) {
//                    layer.msg('确认替换');

                    submit_form();

                    //替换成功，重置该参数
                    managerReplace = false;


                }, function (index) {
//                    layer.msg('设为普工');

                    managerReplace = false;//设为普工不需要替换
                    $("#flag_select").val(0);
                    form.render();
                });
            }
            else {//不需要，直接提交

                submit_form();
            }

            return false;
        });


        //提交表单
        function submit_form() {

            $.post("${pageContext.request.contextPath}/empAction_save.action",
                $("#add_emp_form").serialize(),
                function (data) {
                    //                        parent.layer.alert(data);
                    parent.location.href = '${pageContext.request.contextPath}/pages_emp_emp.action';
                    parent.layer.close(index);
                });
        }

    });

</script>

</body>
</html>
